<template>
  <div>
    <div class="home-banner">
    </div>
    <div class="measure">
      <div class="measure-name">
        <div class="measure-namelist">
          我的练习
        </div>
        <div>
        </div>
      </div>
    </div>

    <div style="margin-top: 1vw">
      <a-table :pagination="{
        current: pageNum,
        pageSize: pageSize,
        total: total,
        showTotal: true,
        onChange: handlePageChange
      }" :data="practiceList" :bordered="false" :style="{ width: '100%' }" :loading="tableLoading">
        <template #columns>
          <a-table-column title="时间" align="center" data-index="LoadTime"></a-table-column>
          <a-table-column title="知识点" align="center" data-index="Style"></a-table-column>
          <a-table-column title="练习时长" align="center" data-index="RealTime"></a-table-column>
          <a-table-column title="状态" align="center" data-index="Score">
            <template #cell="{ record }">
              <a-button type="text" status="success" v-if="record.Score != -1">完成</a-button>
              <a-button type="text" status="danger" v-if="record.Score == -1">未完成</a-button>
            </template>
          </a-table-column>
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-button v-if="record.Score == -1" type="text" size="small" class="practice"
                @click="problemsolving(record, '1')">继续练习</a-button>
              <a-button v-if="record.Score != -1" type="text" size="small" class="practice"
                @click="problemsolving(record, '1')">查看详情</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
  RecordreturnRecordInfo,
  Recordrecorderr,
  RecordrecordOne,
  RecordwrongTestList,
} from "@/api/practise";
import { getList } from "@/api/mypractise";
import useUserStore from "@/store/modules/user";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import { getPermission } from "@/utils/subject";
const userStore = useUserStore();
const router = useRouter();
const subjectID = userStore.$state.subjectID;
const courselist = ref("1");
const subjectIDname = ref();
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableLoading = ref(false);

// 分页变化处理
const handlePageChange = (page: number) => {
  pageNum.value = page;
  getPractiseList();
};



const sum = reactive({
  accuracy: 0, //正确率
  correct_sum: 0, //答对数
  total: 0, //总数
});
const formRecordInfo = ref();
const returnRecordInfo = () => {
  if (subjectIDname.value) {
    RecordreturnRecordInfo({ subjectID: Number(subjectIDname.value) }).then(
      (res: any) => {
        formRecordInfo.value = res.list.map((item: any) => {
          // console.log(item.sub, "?练");
          const { sub, ...rest } = item;
          return { children: sub, ...rest };
        });
        sum.accuracy = res.sum.accuracy;
        sum.correct_sum = res.sum.correct_sum;
        sum.total = res.sum.total;

      }
    );
  }
};

//获取我的练习列表
const practiceList = ref([]);
const getPractiseList = () => {
  if (!subjectIDname.value) {
    console.log('subjectIDname 为空，无法获取数据');
    return;
  }

  tableLoading.value = true;

  let data = {
    subjectID: Number(subjectIDname.value),
    page: Number(pageNum.value),
    limit: Number(pageSize.value),
  };


  getList(data).then((res: any) => {
    // 根据API返回的数据结构进行正确的赋值
    practiceList.value = res.data || res.list || res || [];
    // 设置总数
    total.value = res.total || res.count || 0;
  }).catch((error: any) => {
    practiceList.value = [];
    total.value = 0;
  }).finally(() => {
    tableLoading.value = false;
  });
};

//错题练习
const rongquestion = ref();

const question = () => {
  Recordrecorderr({ sid: Number(subjectIDname.value) }).then((res: any) => {
    rongquestion.value = res.map((item: any) => {
      // console.log(item.sub, "?练");
      const { sub, ...rest } = item;
      return { children: sub, ...rest };
    });
  });
};
// 每日练习
const dailypractice = ref();
const practice = () => {
  // let subjectIDname = subjectID;
  RecordrecordOne({ sid: Number(subjectIDname.value) }).then((res: any) => {
    dailypractice.value = res.info
  });
};
const problemsolving = (record: any, index: any) => {
  if (!getPermission(userStore.$state.subjectID)) {
    // 替换为你的实际权限ID
    // 没有权限时显示提示
    Message.warning("您没有权限访问此内容，请联系管理员");
    return;
  }
  if (record.Score == -1) {
    router.push({
      path: "/Measure/answerQuestions",
      query: {
        textId: record.TestID,
        ctrID: 0,
        type: 1,
      },
    });
  } else if (record.Score != -1) {
    router.push({
      path: "/Measure/answerQuestions",
      query: {
        TestID: record.TestID,
        type: 2,
      },
    });
  }
};

watch(
  () => userStore.$state.subjectID,
  async (newValue, oldValue) => {
    subjectIDname.value = newValue;
    try {
      if (userStore.$state.subjectID) {
        await getPractiseList(); // 获取我的练习列表
      }
    } catch (error) {
      console.error("获取数据出错:", error);
    }
  },
  { immediate: true }
);

onMounted(() => {
  subjectIDname.value = subjectID;
  // 如果初始化时已经有subjectID，直接获取数据
  if (subjectID) {
    // getPractiseList();
  }
});
</script>
<style lang="less" scoped>
/* 鼠标经过表格行时改变背景颜色 */
:deep.ant-table-tbody>tr:hover>td {
  background-color: #f5f5f5;
}

.home-banner {
  width: 100%;
  height: 200px;
  background-color: #fff;
  background-image: url("/img/shanyaozhe.png");
  background-size: 100% 100%;
  border-radius: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

//头部样式
.measure {
  // width: 100%;
  height: 70px;
  background: #0075ff;
  border-radius: 8px;
  border-top: 1px solid #0075ff;
}

.measure-name {
  // width: 100%
  //   height: 70px;
  line-height: 70px;
  margin-top: 5px;
  padding: 0 1vw;
  background: #fff;
  border-radius: 8px;
  display: flex;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}

.measure-namelist {
  display: flex;
  width: 15vw;
  cursor: pointer;
  justify-content: space-between;
  font-size: 1vw;

  .tapelist {
    //  width: 15vw;
    position: relative;
    display: inline-block;
  }

  .tapelistname {
    // width: 200px;
    color: #8393a3;
  }

  .tapelist::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    /* 调整下划线与文本的间距 */
    width: 100%;
    height: 2px;
    /* 加粗下划线，可根据需要调整 */
    background-color: #0075ff;
    box-shadow: 0 0 5px #0075ff;
    /* 添加阴影效果，可根据需要调整 */
  }
}

.inputwidth {
  width: 10vw;
}

.oval-search-button {
  display: inline-block;
  padding: 0 1vw;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  background-color: #1890ff;
  /* 按钮背景色，可根据需要修改 */
  color: #fff;
  /* 按钮文字颜色，可根据需要修改 */
  cursor: pointer;
}

.substance {
  margin-top: 1vw;
  display: flex;
  justify-content: space-between;
}

.substance-top {
  width: 25%;
  height: 120px;
  line-height: 120px;
  display: flex;
  padding: 0 2vw;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #f7fbff;
  border-radius: 8px;
}

.substance-text {
  font-weight: 500;
  font-size: 1vw;
  display: grid;
  align-items: center;
  /* 垂直方向上居中对齐 */
  grid-template-columns: auto auto;
  /* 两列，自动适应内容宽度 */
  grid-column-gap: 5px;
  /* 列之间的间距，可根据需要调整 */
  color: #8393a3;
  text-align: left;
  font-style: normal;
}

.substance-text img {
  width: 2vw;
  height: 4vh
}

.substance-nubmel {
  font-weight: 500;
  font-size: 2vw;
  color: #03305c;
}

.practice {
  font-weight: 400;
  font-size: 16px;
  // color: #0075ff;
  cursor: pointer;
  text-align: center;
  // text-decoration: underline;
  font-style: normal;
  // text-decoration-line: underline;
}

.collapse {
  display: flex;
  justify-content: space-between;
}

.substance-tou {
  margin-top: 1vw;
  width: 100%;
}

.substance-three {
  margin-top: 1vw;
  width: 100%;
}

/* 允许子元素在必要时换行 */
// flex-wrap: wrap;
@media (max-width: 768px) {
  .substance {
    margin-top: 3vw;
    display: flex;
    justify-content: space-between;
  }

  .namelisy {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    // height: 330px;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #ededed;
    font-size: 1vw;
  }

  .tapelist {
    //  width: 15vw;
    font-size: 3vw;
  }

  .tapelistname {
    // width: 200px;
    font-size: 3vw;
    color: #8393a3;
  }

  .substance {
    margin-top: 1vw;
  }

  .substance-top {
    width: 33%;
    height: 60px;
    line-height: 60px;
    margin: 10px auto;
    flex-wrap: wrap;
    background: #f7fbff;
    border-radius: 8px;
    padding: 0px 5px;
  }

  .substance-top img {
    display: none;
  }

  .substance-nubmel {
    font-weight: 500;
    font-size: 4vw;
    color: #03305c;
  }

  .substance-text {
    font-weight: 500;
    font-size: 3vw;
    display: grid;
    align-items: center;
    /* 垂直方向上居中对齐 */
    grid-template-columns: auto auto;
    /* 两列，自动适应内容宽度 */
    grid-column-gap: 5px;
    /* 列之间的间距，可根据需要调整 */
    color: #8393a3;
    text-align: left;
    font-style: normal;
  }

  .substance-text img {
    width: 7vw;
    height: 4vh
  }

  .measure-namelist {
    display: flex;
    width: 40vw;
    justify-content: space-between;
    font-size: 3vw;

    .tapelist {
      // width: 5vw;
      position: relative;
      display: inline-block;
    }

    .tapelist::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 20px;
      /* 调整下划线与文本的间距 */
      width: 100%;
      height: 2px;
      /* 加粗下划线，可根据需要调整 */
      background-color: #0075ff;
      box-shadow: 0 0 5px #0075ff;
      /* 添加阴影效果，可根据需要调整 */
    }
  }

  .inputwidth {
    width: 30vw;
  }

  .measure-name {
    // width: 100%
    // height: 70px;
    // line-height: 7vh;
    margin-top: 5px;
    padding: 0 1vw;
    background: #fff;
    border-radius: 8px;
    display: flex;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
  }
}
</style>
